<template>
    <div id="learnList">
        <div v-if="isLoading" class="mylearn-loading">
            <span><i class="iconfont icon-jiazai"></i></span>
        </div>
        <div v-else-if="isError" class="mylearn-error">{{describe}}</div>
        <div v-else-if="groupList.length == 0" class="not-learn">
            <div class="niu"><img ref="img" src="~assets/images/portfolio/kuniu.png"></div>
            <div class="info">
                <span>大王，你还没有偷师呢！</span><br>
                <span>偷师就是一键复制牛组合的仓位比，<br>这个社区里有超多牛组合呢，小的<br>建议大王赶紧找个帝师练练手呗~</span>
            </div>
            <div ref="submit" class="submit" @click.stop.prevent="goGreatGroup">朕带你看牛组合</div>
        </div>
        <div v-else class="hbox">
            <div class="hbox-row" v-for="(group,index) in groupList" :key="index" @click.stop.prevent="goDetails(group)" >
                <div class="col-1 hbox-row-item">
                    <div class="group_name">{{group.group_name}}</div>
                    <div class="nick_name"><span>{{group.nickname}}</span><span>创建</span></div>
                    <div class="learn_time">{{group.steal_date}}&nbsp;{{group.steal_time}}&nbsp;曾偷师它</div>
                </div>
                <div class="col-2 hbox-row-item">
                    <span>查看</span><i class="iconfont icon-xiangyou"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import LocalDAO from 'common/localDAO'
    import RemoteDAO from 'common/remoteDAO'
    import CommonUtil from 'common/common.util'

    export default {
        data () {
            return {
                user_code: LocalDAO.getUserCode(),
                isLoading: true,
                isError: false,
                groupList: [],
                describe: '数据获取失败了'
            }
        },
        beforeCreate () {
            LocalDAO.setPortfolioMyLearn({"mylearn_data":{"groupList": []},"nickname":LocalDAO.getNickname()});
        },
        mounted () {
            this.getGroupList()
        },
        methods: {

            //获取我偷师的组合列表
            getGroupList () {
                RemoteDAO.callJCl11156(this.user_code, "", 0, 50, response => {
                    if (response.error == 0) {
                        var groupList = response.data.body.records;
                        for(let i=0;i<groupList.length;i++){
                            var group = groupList[i];
                            var obj = {};
                            obj['group_name'] = group.group_name;
                            obj['nickname'] = group.nickname;
                            obj['steal_date'] = CommonUtil.formatDate(group.steal_date);
                            obj['steal_time'] = CommonUtil.formatHourMinute(group.steal_time);
                            obj['client_id'] = group.client_id;
                            obj['group_id'] = group.group_id;
                            this.groupList.push(obj);
                        }
                        this.isError = false;
                    }else{
                        this.groupList = [];
                        this.isError = true;
                        this.describe = response.data;
                    }
                    this.isLoading = false;
                    if(this.groupList.length == 0){
                        this.setCss();
                    }
                    LocalDAO.setPortfolioMyLearn({"mylearn_data":{"groupList": this.groupList},"nickname":LocalDAO.getNickname()});
                })
            },

            //我偷师的组合列表为空时设置css样式
            setCss () {
                var h=document.body.offsetHeight-44;
                var hNiu = h*0.4;
                var hBtn = h*0.08;
                var hInfo = 125; //.info的高度
                var hTop= (h-(hNiu+23*2+hInfo+hBtn))/2;//23*2是牛图的上下padding
                this.$refs.img.style.height = hNiu+'px';
                this.$refs.submit.style.height = hBtn+'px';
                this.$refs.submit.style.lineHeight = hBtn+'px';
                this.$refs.submit.style.marginTop = hTop+'px';
            },

            //点击组合到组合详情页面
            goDetails (group) {
                this.$router.push({path:'/groupdetail',query:{clientId:group.client_id,groupId:group.group_id}});
            },

            //朕带你看牛组合
            goGreatGroup () {
                this.$router.push({path:'/greatstock/bestgroupbox/',query:{footerTab:'portfolio'}});
            }
        }
    }
</script>
